<template>
    <div class="searchPopup">
        <van-search v-model="searchVal" shape="round" :placeholder="placeholderVal" show-action @search="onSearch"
            @cancel="onCancel" @input="onInput" />

        <history-hot v-if="pageShow==1" :hisDataList="hisDataList" :hotDataList="hotDataList" @tagSearch="tagSearch"></history-hot>
        <search-lsit v-else-if="pageShow==2" :searchTips="searchTips" @searchListClick="searchListClick"></search-lsit>
        <search-products v-else 
            :goodsList="goodsList" 
            :filterCategory="filterCategory" 
            @categoryChange="categoryChange" 
            @priceChange="priceChange">
        </search-products>
    </div>
</template>

<script>
    import HistoryHot from '@/components/PopupPages/HistoryHot.vue'
    import SearchLsit from '@/components/PopupPages/SearchList.vue'
    import SearchProducts from '@/components/PopupPages/SearchProducts.vue'
    import {
        GetSearchList,
        GetSearchTipsListData,
        GetGoodsListData,
    } from '@/request/api'

    export default {
        data() {
            return {
                // 搜索框文字
                searchVal: "",
                // 搜索框控制符
                placeholderVal: '',
                // 查询历史数据
                hisDataList: [],
                // 热门查询数据
                hotDataList: [],
                // 搜索关键字联想数据
                searchTips: [],
                // 搜索结果数据
                goodsList: [],
                // 分类
                filterCategory: [],
                // 控制弹出层页面显示 1：历史记录&热门搜索 2：搜素提示列表 3：展示搜索结果
                pageShow: 1,
                // 商品列表请求参数，由子传父来提供
                // 价格排列顺序，desc表示价格由高到低，asc表示价格由低到高
                order:'desc',
                // 类别id，代表下拉菜单中的全部、居家等选项
                categoryId:'0',
                // 默认搜素方式，可以是id或price
                sort:'id'
            }
        },
        methods: {
            onCancel() {
                // 取消返回上一级
                this.$router.back()
            },
            onSearch(val) {
                // 回车触发 
                this.pageShow = 3
                GetGoodsListData({
                    keyword: val,
                    page:1,
                    size:10,
                    order:this.order,
                    categoryId:this.categoryId,
                    sort:this.sort
                }).then(res => {
                    if (res.errno === 0) {
                        let {filterCategory,goodsList} = res.data
                        let newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g,'text').replace(/id/g,'value'))
                        this.goodsList = goodsList
                        this.filterCategory = newArr
                    }
                })

            },
            onInput(val) {
                this.pageShow = 2;
                // 发送请求
                GetSearchTipsListData({
                    keyword: val
                }).then(res => {
                    if (res.errno === 0) {
                        this.searchTips = res.data;
                    }
                });
            },
            // 点击历史记录和热门搜索tag搜索
            tagSearch(val){
                this.searchVal = val;
                this.onSearch(val)
            },
            // 点击搜索提示列表，发搜索
            searchListClick(val){
                this.searchVal = val;
                this.onSearch(val)
            },
            // 分类改变，重新发起请求
            categoryChange(val){
                this.categoryId = val;
                this.onSearch(this.searchVal);
            },
            // 按价格排序改变，重新发起请求
            priceChange(val){
                this.order = val;
                this.sort = "price"
                this.onSearch(this.searchVal);
            }
        },
        components: {
            HistoryHot,
            SearchLsit,
            SearchProducts
        },
        created() {
            // 发起请求
            GetSearchList(this.searchVal).then(res => {
                if (res.errno === 0) {
                    this.placeholderVal = res.data.defaultKeyword.keyword
                    this.hisDataList = res.data.historyKeywordList;
                    this.hotDataList = res.data.hotKeywordList;
                }
            })

        }
    }
</script>


<style scoped>
    .searchPopup {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #efefef;
    }
</style>